<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    table{
        border-collapse: collapse;
    }
    th,td{
        border: 1px solid #000;
        width: 200px;
        line-height: 30px;
        text-align: center;
    }
    .nav input{
        margin-left: 20px;
    }
    tbody tr td input{
        border: 0;
        outline: 0; 
    }
    .list{
        list-style: none;
    }
    .list li{
        display: block;
        width:20px;
        height: 20px;
        border: 1px solid red;
        float: left;
        text-align: center;
    }
    .pre,.next{
        float:left;
       
    } 
    .pre{
        margin: 0 5px 0 0;
    }
    .next{
        margin: 0 0 0 5px; 
    }
</style>
<body>
    <div class="nav">
        <input type="text" placeholder="请输入商品名字">
        <input type="text" placeholder="请输入商品价格">
        <input type="text" placeholder="请输入商品库存">
    <button class="addProduct">增加商品</button>
    <input type="text" placeholder="搜索" class="hunt">
    <input type="button" value="搜索" class="search">
    </div>
    <table>  
        <thead>
            <tr>
                <th>商品编号</th>
                <th>商品名字</th>
                <th>价格
                    <button class="up">升序</button>
                    <button class="down">降序</button>
                </th>
                
                <th>数量</th>
                <th>按钮</th>
                <th>全选<input type="checkbox" id="chexkall"><button class="drop">删除</button></th>
                <th>ids</th>
            </tr>
            
        </thead>
        <tbody>
        </tbody>
    </table>
    
    <div>
        <button class="pre" onclick="press(this)">上一页</button>
        <ul class="list">
           
        </ul>
        <button class="next" onclick="next(this)">下一页</button>
    </div>
    
</body>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>

<script>
//进来获取数据
var lisg;
function test(){
    fan();
    $.ajax({
    url:"http://localhost:8866/getProduct",
    method:"post",
    success:(res)=>{
        lisg=res;
        //页码
        for(let i=1;i<=Math.ceil(res.length/10);i++){
        $(".list").append(`<li onclick="pagg(this)">${i}</li>`);   
        }
        tt(lisg);
        del();
    }
})
}

function tt(lisg){
            for(var i=0;i<10;i++){
            var tag=$("<tr></tr>");
                    tag.html(`
                    <td>${lisg[i]._id}</td>
                    <td><input type="text" value="${lisg[i].title}" disabled></td>
                    <td><input type="text" value="${lisg[i].price}" disabled></td>
                    <td><input type="text" value="${lisg[i].numProduct}" disabled> </td>
                    <td> <button onclick="del(this)" class="del">删除</button>
                        <button onclick="edit(this)" class="edit">编辑</button>
                    </td>
                    <td><input type="checkbox" class="ckecks"></td>
                    <td>${i+1}</td>
                    `)
                    $("table tbody").append(tag);
            }
        }
       



test();
//点击页码
var num=1;
function pagg(aa){
    $("table tbody").html(" ");
            num=$(aa).html();
            console.log(num);
           for(var i=0;i<10;i++){
                    var tag=$("<tr></tr>");
                    tag.html(`
                    <td>${lisg[i+(num-1)*10]._id}</td>
                    <td><input type="text" value="${lisg[i+(num-1)*10].title}" disabled></td>
                    <td><input type="text" value="${lisg[i+(num-1)*10].price}" disabled></td>
                    <td><input type="text" value="${lisg[i+(num-1)*10].numProduct}" disabled></td>
                    <td>
                    <button onclick="del(this)" class="del">删除</button>
                    <button onclick="edit(this)" class="edit">编辑</button>
                    </td>
                    <td><input type="checkbox" class="ckecks"></td>
                    <td>${i+1}</td>
                    `)
                    $("table tbody").append(tag);
        if (lisg[i + (num - 1) * 10] == undefined) {
            return;
        }
    }
}


/////上一页
function press(abs){
    if(num<=1){
        num=1;
    }else{
        num--;
    }
    $("table tbody").html("");
    for(var i=0;i<10;i++){
                    var tag=$("<tr></tr>");
                    tag.html(`
                    <td>${lisg[i+(num-1)*10]._id}</td>
                    <td><input type="text" value="${lisg[i+(num-1)*10].title}" disabled></td>
                    <td><input type="text" value="${lisg[i+(num-1)*10].price}" disabled></td>
                    <td><input type="text" value="${lisg[i+(num-1)*10].numProduct}" disabled></td>
                    <td>
                    <button onclick="del(this)" class="del">删除</button>
                    <button onclick="edit(this)" class="edit">编辑</button>
                    </td>
                    <td><input type="checkbox" class="ckecks"></td>
                    <td>${i+1}</td>
                    `)
                    $("table tbody").append(tag);
            if (lisg[i + (num - 1) * 10] == undefined) {
               return;
        }
    }
}
////下一页
function next(ads){
    if(num>=Math.ceil(lisg.length/10)){
        num=Math.ceil(lisg.length/10);
       console.log(num);
    }else{
        num++;
        console.log(num);
    }
    $("table tbody").html("");
    for(var i=0;i<10;i++){
                    var tag=$("<tr></tr>");
                    tag.html(`
                    <td>${lisg[i+(num-1)*10]._id}</td>
                    <td><input type="text" value="${lisg[i+(num-1)*10].title}" disabled></td>
                    <td><input type="text" value="${lisg[i+(num-1)*10].price}" disabled></td>
                    <td><input type="text" value="${lisg[i+(num-1)*10].numProduct}" disabled></td>
                    <td>
                    <button onclick="del(this)" class="del">删除</button>
                    <button onclick="edit(this)" class="edit">编辑</button>
                    </td>
                    <td><input type="checkbox" class="ckecks"></td>
                    <td>${i+1}</td>
                    `)
                    $("table tbody").append(tag);
            if (lisg[i + (num - 1) * 10] == undefined) {
               return;
        }
    }
}

//添加商品
    $(".addProduct").click(()=>{
        if(($(".nav input").eq(0).val()=="")||($(".nav input").eq(1).val()=="")||($(".nav input").eq(2).val()=="")){
            alert("不能为空");
           return;
        }
        var pss;
        $.ajax({
            url:"http://localhost:8866/add",
            method:"post",
            data:{
              title:$(".nav input").eq(0).val(),
              price:$(".nav input").eq(1).val(),
              numProduct:$(".nav input").eq(2).val()
            },
            success:(res)=>{
                lisg=res;
                $("table tbody").html(" ");

                $(".list").html(" ")
               test();
              
                fan();
               
            }
        })
    })
    //升序
$(".up").click(()=>{
    $.ajax({
        url:"http://localhost:8866/up",
        method:"post",
        data:{
            price:1
        },
        success:(res)=>{
            lisg=res;
            console.log(res);
            $("table tbody").html(" ");
            tt(lisg);
           fan();
        }
    })
})

//降序
$(".down").click(()=>{
    fan();
    $.ajax({
        url:"http://localhost:8866/up",
        method:"post",
        data:{
            price:-1
        },
        success:(res)=>{
           lisg=res;
            console.log(res);
            $("table tbody").html(" ");
            tt(lisg);
           
           
        }
    })
})
//删除
function del(a){
    $.ajax({
        url:"http://localhost:8866/del",
        method:"post",
        data:{
            _id:$(a).parent().parent().children(0).html().replace(/\s*/g,""),//去空格 trim()
        },
        success:(res)=>{   
        $(".list").html();
            if(res.result.n==1){
                $(a).parent().parent().remove();  
            }
        }

    })
}
//编辑
var flag;
function edit(a){
    var title=$(a).parent().parent().children().eq(1).children();
    var price=$(a).parent().parent().children().eq(2).children();
    var numProduct=$(a).parent().parent().children().eq(3).children();
    $.ajax({
        url:"http://localhost:8866/edit",
        method:"post",
        data:{
            _id:$(a).parent().parent().children(0).html().trim(),//去空格 trim()
            title:title.val(),
            price:price.val(),
            numProduct:numProduct.val()
        },
        success:(res)=>{
            if(!flag){
                $(a).html("确认")
                title.attr("disabled",false)
                price.attr("disabled",false)
                numProduct.attr("disabled",false)
                flag=true;
            }else{
                $(a).html("编辑")
                title.attr("disabled",true)
                price.attr("disabled",true)
                numProduct.attr("disabled",true)
                flag=!flag;
            }
        }
    })
}
//全选
var all=$("#chexkall");
all.click(()=>{
    var checks=$("tbody input[type=checkbox]");
    if(all.is(":checked")){
        for(let i=0;i<checks.length;i++){
        var checkbox=checks[i];
        checkbox.checked = true;
      }
    }else{
        for(let i=0;i<checks.length;i++){
        var checkbox=checks[i];
        checkbox.checked = false;
    }
    }
})

//反选  购物车 商品的增删改查mongodb node
function fan(){
    var checks=document.querySelectorAll(".ckecks");  
    console.log(checks);
    for(var i=0;i<checks.length;i++){
    checks[i].onclick=function(){
        console.log(checks[i]);
             var arr=Array.from(checks);
             console.log(all.get(0));
            document.getElementById("chexkall").checked=arr.every(function(value){
                 return value.checked;
             })
         }   
    }
}
fan()

//搜索
$(".search").click(()=>{
        $.ajax({
            url:"http://localhost:8866/search",
            method:"post",
            data:{
                content:$(".hunt").val()
            },
            success:(res)=>{
                $("table tbody").html(" ");
                for(let i=0; i<res.length; i++){
                    var tag=$("<tr></tr>");
                    tag.html(`
                    <td>${res[i]._id}</td>
                    <td><input type="text" value="${res[i].title}" disabled></td>
                    <td><input type="text" value="${res[i].price}" disabled></td>
                    <td><input type="text" value="${res[i].numProduct}" disabled> </td>
                    <td> <button onclick="del(this)" class="del">删除</button>
                        <button onclick="edit(this)" class="edit">编辑</button>
                    </td>
                    <td><input type="checkbox" class="ckecks"></td>
                    <td>${i+1}</td>
                    `)
                    $("table tbody").append(tag);
                 }
                 fan();
            }

        })
})
   
  
//批量删除
$('.drop').click(()=>{
    fan();
    var checks=document.getElementsByClassName("ckecks");
    for(let i=0;i<checks.length;i++){
        if (checks[i].checked){
           
            $.ajax({
                url:"http://localhost:8866/del",
                method:"post",
                data:{
                    _id:checks[i].parentNode.parentNode.childNodes[1].innerHTML.replace(/\s*/g,""),  
                },
                success:function(res){
                   
                    if(res.result.n==1){
                        checks[i].parentNode.parentNode.remove();
                        $("table tbody").html(" ");
                        $(".list").html(" ");
                        test();
                    }
                }
                    

            })
        }
       
    }    
})
</script>
</html>